<template>
  <div class="header-tabs">
    <el-tabs v-model="activeTab" @tab-click="handleTabClick">
      <el-tab-pane
        v-for="tab in tabs"
        :key="tab.path"
        :label="tab.name"
        :name="tab.path"
        @contextmenu.prevent="showContextMenu($event, tab.path)"
      >
        <template #close>
          <el-icon @click.stop="handleRemoveTab(tab.path)"><Close /></el-icon>
        </template>
      </el-tab-pane>
    </el-tabs>
    <el-popover
      placement="bottom"
      :visible.sync="contextMenuVisible"
      :popper-options="{ modifiers: [{ name: 'offset', options: { offset: [0, 10] } }] }"
      trigger="manual"
      ref="contextMenuRef"
    >
      <template #content>
        <el-menu>
          <el-menu-item @click="handleRemoveLeftTabs(currentContextTab)">删除左侧标签</el-menu-item>
          <el-menu-item @click="handleRemoveRightTabs(currentContextTab)">删除右侧标签</el-menu-item>
          <el-menu-item @click="handleRemoveOtherTabs(currentContextTab)">删除其他标签</el-menu-item>
          <el-menu-item @click="handleRefreshTab(currentContextTab)">刷新标签</el-menu-item>
        </el-menu>
      </template>
    </el-popover>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useStore } from 'vuex';
import { Close } from '@element-plus/icons-vue';

const store = useStore();
const contextMenuRef = ref(null);
const contextMenuVisible = ref(false);
const currentContextTab = ref(null);

const tabs = computed(() => store.getters['tabs/getTabs']);



</script>

<style scoped>
.header-tabs {
  padding: 10px;
}
</style>
